<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    {% include "component/static_resource_css.html" %}
    <title>{{ user.username }}- 粉丝</title>
</head>
<body>
<div class="nk-container">
    <!-- 头部 -->
    {% include 'component/header.html' %}
    <!-- 内容 -->
    <div class="main">
        <div class="container">
            <div class="position-relative">
                <!-- 选项 -->
                <ul class="nav nav-tabs mb-3">
                    <li class="nav-item">
                        <a class="nav-link position-relative" href="/user/followees/{{ user.id }}">
                            <i class="text-info">{{ user.username }}</i> 关注的人</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link position-relative active" href="/user/followers/{{ user.id }}">
                            关注 <i class="text-info">{{ user.username }}</i> 的人</a>
                    </li>
                </ul>
                {% if user.id == user.cu_id %}
                <a href="/user/profile/{{ user.cu_id}}"
                   class="text-muted position-absolute rt-0">返回个人主页&gt;</a>
                {% endif %}
            </div>

            <!-- 粉丝列表 -->
            <ul class="list-unstyled">
                {% for follower in follower_all %}
                    <li class="media pb-3 pt-3 mb-3 border-bottom position-relative">
                        <a href="/user/profile/{{ follower.id }}">
                            <img src="{{ follower.header_url }}" class="mr-4 rounded-circle user-header" alt="用户头像">
                        </a>
                        <div class="media-body">
                            <h6 class="mt-0 mb-3">
                                <span class="text-success">
                                <a href="/user/profile/{{ follower.id }}">{{ follower.username }}</a>
                                </span>
                                <span class="float-right text-muted font-size-12">
									关注于 <i>{{ follower.like_create_time }}</i></span>
                            </h6>
                            <div>
                                {% if follower.like == 1 %}
                                    <button type="button"
                                            class="btn-sm float-right mr-5 follow-btn btn-info btn-info like01"
                                            id="follower1_{{ follower.id }}">
                                        已关注
                                    </button>
                                {% else %}
                                    <button type="button"
                                            class="btn-sm float-right mr-5 follow-btn btn-secondary like01"
                                            id="follower2_{{ follower.id }}">
                                        关注TA
                                    </button>
                                {% endif %}
                            </div>
                        </div>
                    </li>
                {% endfor %}
            </ul>
            <!-- 分页 -->
            {#            <nav class="mt-5" th:replace="index::pagination"></nav>#}

        </div>
    </div>
    <!-- 尾部 -->
    {% include "component/footer.html" %}

</div>
{% include "component/static_resource_js.html" %}

<script>
    {#关注用户#}
    $('.like01').click(function () {
        var id = $(this).attr('id').split("_")[1];
        abc = $(this)
        var data = {likeType: 1, userId: id};
        $.ajax({
            type: 'POST',
            url: "http://127.0.0.1:5000/user/like",
            dataType: 'json',
            contentType: "application/json",
            data: JSON.stringify(data),
            isCorrect: function () {
                alert("ok")
            },
            success: function (data) {
                if (data.data == 0) {
                    {#修改样式#}
                    abc.removeClass('btn-info')
                    abc.addClass('btn-secondary')
                    abc.text("关注TA")
                    alert("取消关注");
                } else {
                    abc.removeClass('btn-secondary')
                    abc.addClass('btn-info')
                    abc.text("已关注")
                    alert("关注成功");
                }
                if ((data.code + '')[0] != '2') {
                    alert("失败")
                    console.error(data.msg)
                    return
                }
            },
            error: function () {
                alert("未登录")
            },
        })
    })
</script>
</body>
</html>
